<template>
	<view>
		<view class="nething" v-show="carData.length == 0">
			购物车里什么都没有...
		</view>
		<view style="width: 100%;" v-show="carData.length > 0">
			<view class="car_list" v-for="item,index in carData" :key='index'>
				<view class="check">
					<checkbox :checked="item.is_checked === 1" @click="changClick(item.id )" />
				</view>
				<view class="img">
					<image :src="item.goods.cover_url" style="width: 90%;height: 90%;border-radius: 20rpx;" @click="changRouter(item.goods.id)" ></image>
				</view>
				<view class="context">
					<view class="context_titel">
						{{item.goods.title.length > 14 ? item.goods.title.slice(0,12) + '...' : item.goods.title}}

					</view>
					<view class="contest_attr">
						{{item.goods.description}}
					</view>
					<view class="haveKuoo">
						库存<text>{{item.goods.stock}}</text>
					</view>
					<view class="context_spice">
						<view class="context_spice_main">
							￥{{item.goods.price}}
						</view>
						<view class="context_spice_change">
							<view class="change_button" :style="{'opacity':item.num == 1? 0.5 : 1 }"
								@click="setChangeCarNum(item.id,item.num-1)">
								-
							</view>
							<input type="text" v-model="cloneData[index].num" :placeholder="item.num+''"
								@input="changInput($event,item.id,item.goods.stock)" />
							<view class="change_button"
								@click="setChangeCarNum(item.id,item.num >= item.goods.stock ?  -1 : item.num+1)">
								+
							</view>
						</view>
						<view class="change_delete" @click="delectCar(item.id)">
							<uni-icons type="trash" color='red' size='25'></uni-icons>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="btm_list">
			<view class="btm_checked">
				<checkbox :checked="sunChekd" @click="changClick(-1,true)" />
				全选
			</view>
			<view class="btm_other">
				<view class="btm_other_spice">
					总价 <text style="color: red;font-weight: 700;">￥{{sumPirce}}</text>
				</view>
				<button type="default" size="mini"
					style="width: 200rpx;height: 80rpx;font-weight: 700;display: flex;justify-content: center;align-items: center;background-color: #F9F871;" @click="sumbitOrder">结算</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		cloneDeepWith
	} from 'lodash'
	import {
		mapState,
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
				checkKey: true,
				cloneData: [],
				timer: true
			};
		},
		computed: {
			...mapState('indexStore', ['carData']),
			sunChekd() {
				if (Object.keys(this.carData).length > 0) {
					return this.carData.every((item) => item.is_checked == 1)
				} else {
					return false
				}
			},
			sumPirce() {
				return this.carData.reduce((value, item) => {
					if (item.is_checked == 1) {
						return value += item.goods.price * item.num
					}
					return value
				}, 0)
			}
		},
		methods: {
			...mapActions('indexStore', ['getCatListDData', "getChangeCarNum",'getOrdersData']),
			changRouter(id){
				uni.navigateTo({
					url:'../../pagesLogin/detial/detial?id='+id
				})
			},
			delectCar(id) {
				uni.showModal({
					title: '确定删除吗',
					success: async (e) => {
						if (e.confirm) {
							const result = await uni.$u.api.reqDelectCar(id)
							if (result === '') {
								await this.getCatListDData()
								uni.showToast({
									title: '删除成功',
									icon: 'none'
								})
							}
						}
					}
				})
			},
			async setChangeCarNum(id, num) {
				if (num < 1) return
				if (this.checkKey) {
					this.checkKey = false
					const result = await this.getChangeCarNum({
						id,
						num
					})
					if (result === '') {
						this.getCatListDData()
					}
					this.checkKey = true
				}
			},
			changInput({
				detail: {
					value
				}
			}, id, max) {
				clearTimeout(this.timer)
				this.timer = setTimeout(() => {
					if (!isNaN(parseInt(value)) && value <= max) {
						this.setChangeCarNum(id, value)
					} else {
						uni.showToast({
							title: value > max ? '超过最大库存' : '字符不合法',
							icon: 'none'
						})
						this.cloneData = cloneDeepWith(this.carData)
					}
				}, 500)
			},
			changClick(id, sum) {
				const arr = this.carData.reduce((value, item) => {
					if (sum && this.sumPirce) return value
					if (item.is_checked == 1 || !this.sumPirce) {
						if (item.id == id) return value
						value.push(item.id)
					} else {
						if (item.id == id) {
							value.push(item.id)
						}
					}
					return value
				}, [])
				this.getChangeSclict(arr)
			},
			async getChangeSclict(arr) {
				const result = await uni.$u.api.reqChangeSclict(arr)
				if (result == '') {
					this.getCatListDData()
				}
			},
			async sumbitOrder(){
					uni.navigateTo({
						url:'../../pagesLogin/settlement/settlement'
					})
			}
		},
		onLoad() {
			this.getCatListDData()
		},
		onShow() {
			this.tools.isToken()
		},
		watch: {
			"carData": {
				handler() {
					this.cloneData = cloneDeepWith(this.carData)
				},
				deep: true,
				immediate: true
			}
		},

	}
</script>

<style lang="scss">
	.btm_list {
		align-items: center;
		display: flex;
		padding: 0 40rpx;
		justify-content: space-between;
		width: 100%;
		height: 150rpx;
		background-color: #57E3A8;
		position: fixed;
		bottom: 0;
		//#ifdef H5
		bottom: 98rpx;
		//#endif
		left: 0;

		.btm_checked {
			font-weight: 700;
		}

		.btm_other {
			width: 70%;
			height: 100%;
			align-items: center;
			display: flex;

			.btm_other_spice {
				font-size: 35rpx;
			}
		}
	}

	.nething {
		width: 100%;
		display: flex;
		height: 500rpx;
		font-weight: 700;
		font-size: 40rpx;
		justify-content: center;
		align-items: flex-end;
	}

	/deep/.uni-checkbox-input {
		border-radius: 50%;
		border-color: none;
		background-color: #F9F871;
		overflow: hidden;

		&::before {
			color: black;
			font-size: 60rpx !important;
			font-weight: 700;
		}
	}

	.car_list {
		height: 200rpx;
		width: 90%;
		margin: 20rpx auto;
		border-radius: 30rpx;
		background-color: #57E3A8;
		overflow: hidden;
		display: flex;

		.check {
			width: 70rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.img {
			width: 150rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.context {
			flex: 1;
			padding-top: 10rpx;

			.context_titel {
				padding-left: 40rpx;
				font-weight: 700;
				font-size: 35rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.contest_attr {
				color: #259ECE;
				font-weight: 700;
				font-size: 20rpx;
				padding-left: 20rpx;
			}

			.haveKuoo {
				text-align: right;
				color: #259ECE;
				font-weight: 700;
				font-size: 20rpx;
				padding-right: 10rpx;

				text {
					color: #ED6970;
				}
			}

			.context_spice {
				display: flex;
				height: 50rpx;
				justify-content: space-between;
				margin-top: 20rpx;

				.context_spice_main {
					color: #ED6970;
					font-weight: 700;
				}

				.change_delete {
					padding-right: 20rpx;
				}

				.context_spice_change {
					display: flex;

					input {
						text-align: center;
						width: 60rpx;
						margin: 0 10rpx;
						display: block;
						height: 100%;
						background-color: #F9F871;
						border-radius: 10rpx;
						font-weight: 700;
					}

					.change_button {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 60rpx;
						background-color: #F9F871;
						border-radius: 10rpx;
						font-weight: 700;

					}
				}

			}
		}
	}

	page {
		background-color: #F9F871 !important;
		//#ifdef H5
		padding-bottom: 80rpx;
		//#endif
	}
</style>
